import {useRef} from 'react';
// 创建一个函数的dom引用
function Item(props) {
    // 创建dom引用
    const inpRef= useRef();
    function toEdit(){
        // 修改status为1 变成去编辑状态
        props.updateItem({...props.item,status:1},props.item)
        setTimeout(()=>{
            // input修改框默认值
            inpRef.current.value = props.item.title;
            // 获取焦点
            inpRef.current.focus();
        },10)
    }

    function sureEdit(){
        // 获取修改框的值
        var title = inpRef.current.value;
        props.updateItem({...props.item,status:0,title},props.item)
    }
    function changeCheck(e){
        props.updateItem({...props.item,done:e.target.checked},props.item)
    }

    
    return ( <div>
        {props.item.status===0?<div>
            {/* 正常状态 */}
            <input type="checkbox" checked={props.item.done} onChange={(e)=>changeCheck(e)}/>
            <span onDoubleClick={toEdit}>{props.item.title}</span>
            <button onClick={()=>props.delItem(props.item)}>×</button>
        </div>:<div>
            {/* 编辑状态 */}
            <input ref={inpRef} /> 
            <button onClick={sureEdit}>修改</button>
        </div>}
    </div> );
}

export default Item;